<script setup>
import { usePaintingStore } from "@/store";
import { imgUploadVerify } from "@/utils/auth";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from 'vue'
import BgDesc from "../../components/BgDesc.vue";
import projectConfig from "@/config/project/index.js";


const item = ref({})
let isExpand = ref(false);
const paintingStore = usePaintingStore();
const vipGenerationBgc = paintingStore.vipGenerationBgc;

const isShowHistory = ref(false); // 文案记录下拉框显示
// const refImageUrl = ref('') // 参考图图片地址

// 负向文本域输入值
const negPromptInputChange = (e) => {
  vipGenerationBgc.negPrompt = e.detail.value;
};

// 文本域输入值
const inputChange = (e) => {
  vipGenerationBgc.prompt = e.detail.value;
};
function delRefImage() {
  debugger;
  vipGenerationBgc.orgRefImageUrl = '';
  vipGenerationBgc.refImageUrl = '';
}
function changeBgDesc(obj) {
  let keys = Object.keys(obj);
  vipGenerationBgc.prompt = obj.bgDescStr;
  vipGenerationBgc.promptObj = obj.bgDesc;
}
// 参考图图片上传
const imgUploadFn = async () => {
  const url = await imgUploadVerify();
  vipGenerationBgc.orgRefImageUrl = url
}

onLoad((e) => {
  e.item && (item.value = JSON.parse(e.item))
});
</script>

<template>
  <!-- 背景表述词 -->
  <!-- <div class="itemBox">
    <div class="titleBox">
      <div class="leftBox">
        <i class="leftIcon"></i>
        <p class="title">背景描述词
        </p>
      </div>
      <div class="rightBox">
        <div class="right" @click="isShowHistory = true">
          <i class="iconfont ai-icon-lishi"></i>
          <p class="closeText">文案记录</p>
        </div>
        <div class="right">
          <div v-if="projectConfig.name == 'ai2030'" @click="vipGenerationBgc.prompt = ''">
            <i class="iconfont ai-icon-qingchuwenben"></i>
            <p class="closeText">清除文本</p>
          </div>
          <div v-else @click="isExpand = !isExpand"><i class="iconfont"
              :class="[isExpand ? 'ai-icon-xiantiaoshangsanjiao' : 'ai-icon-shangsanjiao']"
              style="font-size: 26rpx;"></i></div>
        </div>

      </div>
    </div>
    <div style="position: relative"> -->
  <BgDesc v-model="vipGenerationBgc" @change="changeBgDesc">
  </BgDesc>
  <!-- </div>
  </div> -->


  <!-- 负向表述词 -->
  <!-- <div class="itemBox">
    <div class="titleBox">
      <div class="leftBox">
        <i class="leftIcon"></i>
        <p class="title">反向描述词
        </p>
      </div>
      <div class="rightBox">
        <div class="right" @click="vipGenerationBgc.negPrompt = ''">
          <i class="iconfont ai-icon-qingchuwenben"></i>
          <p class="closeText">清除文本</p>
        </div>
      </div>
    </div>
    <div style="position: relative">
      <textarea :value="vipGenerationBgc.negPrompt" class="textarea" placeholder="用来描述不希望在画面中展示的内容"
        placeholder-class="taPlaceHolder" @input="negPromptInputChange"></textarea>
    </div>
  </div> -->



  <!-- 风格 -->
  <!-- <div class="itemBox">
    <div class="titleBox">
      <div class="leftBox">
        <i class="leftIcon"></i>
        <p class="title">风格</p>
      </div>
    </div>
    <div class="style-box">
      <div class="style-box-item" :class="{ active: vipGenerationBgc.sceneType === 'GENERAL' }"
        @click="vipGenerationBgc.sceneType = 'GENERAL'">
        <img class="style-img" src="@/draw/assets/背景_通用.png" alt="" />
        <p class="style-text">通用</p>
      </div>

      <div class="style-box-item" :class="{ active: vipGenerationBgc.sceneType === 'ROOM' }"
        @click="vipGenerationBgc.sceneType = 'ROOM'">
        <img class="style-img" src="@/draw/assets/家居.png" alt="" />
        <p class="style-text">室内家居</p>
      </div>

      <div class="style-box-item" :class="{ active: vipGenerationBgc.sceneType === 'COSMETIC' }"
        @click="vipGenerationBgc.sceneType = 'COSMETIC'">
        <img class="style-img" src="@/draw/assets/美妆.png" alt="" />
        <p class="style-text">美妆/小商品</p>
      </div>
    </div>

  </div> -->

  <div class="itemBox">
    <div class="titleBox">
      <div class="leftBox">
        <i class="leftIcon"></i>
        <p class="title">
          上传背景参考图
          <span class="mark">(AI会在参考图基础上，进行绘图)</span>
        </p>
      </div>
    </div>
    <div class="imgUpload" @click.stop="imgUploadFn">

      <img v-if="vipGenerationBgc.orgRefImageUrl" :src="vipGenerationBgc.orgRefImageUrl" mode="aspectFill" />
      <van-icon name="plus" v-else />
      <div class="delIcon_box" v-if="vipGenerationBgc.orgRefImageUrl" @click.stop="delRefImage">
        <div class="delIcon">
          <i class="iconfont ai-icon-shanchutupian"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.itemBox {
  .titleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx 0 22rpx;

    .leftBox {
      display: flex;
      align-items: center;

      .leftIcon {
        width: 12rpx;
        height: 18rpx;
        background: var(--a-main-color);
        border-radius: 6rpx;
        margin-right: 10rpx;
      }

      .title {
        font-size: 28rpx;
        color: var(--a-one-text-color);

        label {
          font-weight: 400;
          font-size: 24rpx;
        }
      }
    }

    .rightBox {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 350rpx;

      .right {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: var(--a-three-text-color);

        .iconfont {
          margin-right: 6rpx;
        }

        &:first-child {
          margin-right: 20rpx;
        }
      }
    }
  }
}

.textarea {
  box-sizing: border-box;
  width: 100%;
  height: 166rpx;
  display: block;
  margin: 0 auto;
  padding: 24rpx;
  background: var(--a-main-box-bg-color);
  border-radius: 20rpx;
  font-size: 28rpx;
  color: var(--a-one-text-color);

  /deep/.taPlaceHolder {
    color: var(--a-three-text-color);
  }
}

.selectHistory {
  position: absolute;
  top: 180rpx;
  left: 0;
}

.style-box {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  .style-box-item {
    box-sizing: border-box;
    width: 160rpx;
    height: 214rpx;
    margin-right: 17rpx;

    .style-img {
      display: block;
      border: 4rpx solid transparent;

      width: 154rpx;
      height: 154rpx;
      object-fit: contain;
      margin-bottom: 12rpx;
      border-radius: 30rpx;
    }

    .style-text {
      font-size: 26rpx;
      text-align: center;
      color: var(--a-one-text-color);
    }
  }

  .active {
    .style-img {
      border: 4rpx solid var(--a-main-color);
    }

    .style-text {
      color: var(--a-main-color);
    }
  }
}

.imgUpload {
  width: 160rpx;
  height: 160rpx;
  line-height: 160rpx;
  background: var(--a-main-box-bg-color);
  border-radius: 24rpx;
  color: var(--a-main-color);
  overflow: hidden;
  text-align: center;
  position: relative;

  image {
    width: 100%;
    height: 100%;
  }

  .delIcon_box {
    position: absolute;
    top: 0;
    right: 0;
    width: 60rpx;
    height: 60rpx;

    .delIcon {
      position: absolute;
      top: 0;
      right: 0;
      width: 40rpx;
      height: 40rpx;
      background-color: rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0 0 0 24rpx;
      box-shadow: 0 0 10rpx rgba(255, 255, 255, 0.3);

      .iconfont {
        font-size: 24rpx;
        color: #fff;
      }
    }
  }
}
</style>